<template>
  <j-modal
    :title="'审核生产计划 - ' + model.planName"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    
    <a-spin :spinning="loading">
      <!-- 计划基本信息 -->
      <a-card title="计划信息" :bordered="false" style="margin-bottom: 16px;">
        <a-row :gutter="24">
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">计划编号：</span>
              <span class="value">{{ model.planNo }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">计划名称：</span>
              <span class="value">{{ model.planName }}</span>
            </div>
          </a-col>
        </a-row>
        
        <a-row :gutter="24">
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">关联订单：</span>
              <span class="value">{{ model.orderNo || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">计划数量：</span>
              <span class="value">{{ model.planQuantity }}</span>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">计划开始日期：</span>
              <span class="value">{{ model.planStartDate }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">计划结束日期：</span>
              <span class="value">{{ model.planEndDate }}</span>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">计划负责人：</span>
              <span class="value">{{ model.planManager }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <span class="label">优先级：</span>
              <a-tag v-if="model.priority==1" color="green">低</a-tag>
              <a-tag v-else-if="model.priority==2" color="orange">中</a-tag>
              <a-tag v-else-if="model.priority==3" color="red">高</a-tag>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24" v-if="model.remark">
          <a-col :span="24">
            <div class="detail-item">
              <span class="label">计划备注：</span>
              <span class="value">{{ model.remark }}</span>
            </div>
          </a-col>
        </a-row>
      </a-card>

      <!-- 审核表单 -->
      <a-card title="审核信息" :bordered="false">
        <a-form-model ref="form" :model="approveForm" :rules="validatorRules" v-bind="layout">
          <a-form-model-item label="审核结果" prop="approveResult">
            <a-radio-group v-model="approveForm.approveResult">
              <a-radio :value="1">通过</a-radio>
              <a-radio :value="0">拒绝</a-radio>
            </a-radio-group>
          </a-form-model-item>

          <a-form-model-item label="审核意见" prop="approveRemark">
            <a-textarea 
              v-model="approveForm.approveRemark" 
              placeholder="请输入审核意见"
              :rows="4"
              :maxLength="500"
              showCount>
            </a-textarea>
          </a-form-model-item>
        </a-form-model>
      </a-card>

    </a-spin>
  </j-modal>
</template>

<script>
// import { httpAction } from '@/api/manage'

export default {
  name: 'PlanApproveModal',
  data() {
    return {
      visible: false,
      loading: false,
      confirmLoading: false,
      model: {},
      approveForm: {
        approveResult: 1,
        approveRemark: ''
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      },
      validatorRules: {
        approveResult: [{ required: true, message: '请选择审核结果!' }],
        approveRemark: [{ required: true, message: '请输入审核意见!' }]
      },
      url: {
        approve: '/mes/plan/approve'
      }
    }
  },
  methods: {
    show(record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.approveForm = {
        approveResult: 1,
        approveRemark: ''
      }
    },
    close() {
      this.visible = false
      this.model = {}
      this.approveForm = {
        approveResult: 1,
        approveRemark: ''
      }
    },
    handleOk() {
      const that = this
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          
          // 构建表单参数
          let params = new URLSearchParams()
          params.append('planId', this.model.id)
          params.append('approved', this.approveForm.approveResult === 1)
          params.append('remark', this.approveForm.approveRemark || '')
          
          // 使用表单方式提交
          this.$http.post(this.url.approve, params, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              that.close()
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.detail-item {
  margin-bottom: 12px;
  
  .label {
    font-weight: 500;
    color: #666;
    margin-right: 8px;
  }
  
  .value {
    color: #333;
  }
}
</style>
